<template>
  <div id="app">
    <!-- 侧边栏在app.vue 中引入 -->
    <div v-if="route.path == '/login'">
      <router-view></router-view>
    </div>
    <el-container v-else>
      <!-- el-container 容器，可以进行左右，上下布局 -->
      <!-- el-aside 侧边栏-->
      <!-- el-header 头部布局 -->
      <!-- el-main 主要内容 -->
      <el-aside width="200px">
        <slider></slider>
      </el-aside>
      <el-container>
        <el-header class="app-header">
          <headers></headers>
          <div class="app-bread">
            <Breadcrumb></Breadcrumb>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      
    </el-container>
    
  </div>
</template>
<script>
import Slider from "@/components/Slider/Slider.vue"
import Headers from "@/components/Header/Header.vue"
import Breadcrumb from "@/components/Breadcrumb/Breadcrumb.vue"
export default {
  components: {
    Slider,
    Headers,
    Breadcrumb
  },
  data() {
    return {
      route: ''
    }
  },
  watch: {
    $route(val) {
      console.log(this.$route,43)
      this.route = val;
    }
   }
}
</script>
<style lang="scss" scoped>
// 首先搭建完项目之后，修改app.vue文件。
// 安装要使用的插件
// 在views 视图当中新建项目内容文件
// 在路由中配置文件
// 要下一些全局文件，比如css默认样式文件
// 然后开始写页面布局以及样式
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  // color: #2c3e50;
}
.app-header {
  color: #ffffff;
  background: rgb(84, 92, 100);
  text-align: right;
  line-height: 60px;
}
.el-main {
  margin-top: 10px;
}
</style>
